<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>${s_UserPharmacy.pharmacy.name}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>
<script src="<c:url value="/resources/js/jquery.jstree.js" />"></script>

<script type="text/javascript">
$(function() {
    
	 //Array para dar formato en español
	  $.datepicker.regional['es'] = 
	  {
	  closeText: 'Cerrar', 
	  prevText: 'Previo', 
	  nextText: 'Próximo',
	  
	  monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
	  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
	  monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
	  'Jul','Ago','Sep','Oct','Nov','Dic'],
	  monthStatus: 'Ver otro mes', yearStatus: 'Ver otro año',
	  dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
	  dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'],
	  dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
	  dateFormat: 'dd/mm/yy', firstDay: 0, 
	  initStatus: 'Selecciona la fecha', isRTL: false};
	  $.datepicker.setDefaults($.datepicker.regional['es']);
});


	$(document).ready(function(){	
		$("#formGrupo").validate({
			/* rules: {
	             'userpharmacy.userId.login': {
	            	 remote: "validateUsernameUnique"
	             }      
	         },	         
	         messages:{
	             'userpharmacy.userId.login':{
	                 remote: jQuery.format("User {0} already exists")
	             }
	         },  
	         */
	        submitHandler: function(form) {
	       		form.submit();
	        }
	    });
		
		//permit only text
		$('.lettersOnly').keyup(function () {
	         if (this.value != this.value.replace(/[^A-Za-z\s]/g, '')) {
	            this.value = this.value.replace(/[^A-Za-z\s]/g, '');
	         }
	     });
		 
		//permit only numbers
		$('.numberOnlyNumber').keyup(function () {
	         if (this.value != this.value.replace(/[^0-9]/g,'')) {
	            this.value = this.value.replace(/[^0-9]/g, '');
	         }
	     });
		
		
	});

	function mainVisitors(){
		location.href = "visitors?_menuId=2&_subMenuId=4&_optionId=2&_providerId="+"<c:out value="${param._providerId}"/>";	
	}
	
	/*Para las imagenes justo al momento de guardar*/
	function LimitAttach(tField,iType) {
	    file=tField.value;
	    if (iType==1) {
	    	extArray = new Array(".gif",".jpg",".png");
	    }
	    if (iType==2) {
	    	extArray = new Array(".swf");
	    }
	    allowSubmit = false;
	    if (!file) return;
	    while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\") + 1);
	    ext = file.slice(file.indexOf(".")).toLowerCase();
	    for (var i = 0; i < extArray.length; i++) {
	    	if (extArray[i] == ext) {
	    		allowSubmit = true;
	    		break;
	    	}
	   	}
	    if (allowSubmit) {
	    } else {
	    tField.value="";
	    alert("Usted sólo puede subir archivos con extensiones " + (extArray.join(" ")) + "\nPor favor seleccione un nuevo archivo");
	    }
    }
	
	/*Validando el email*/
	function validateEmail(emailField){
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField.value) == false) 
        {
            alert('Dirección de correo electrónico no válida');
            return false;
        }

        return true;
	}

</script>
</head>

<body>
<div id="top-wrap">
	<%@include file="../../../head.jsp"  %>
	<div id="bodySpace">
		
	    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
	        <!-- aqui va el arbol de entrada -->
	        <div id="breadcrumb">
	            <ul>
                	<li><a href="<spring:url value="/mainFront?" htmlEscape="true" />">Home</a></li>	
                    <li><span style="color:#666"><fmt:message key="title.admin"/></span></li>
                    <li><span style="color:#666"><fmt:message key="title.providers"/></span></li>
                    <li class="current-page"><span class="end"><span class="middle"><fmt:message key="title.adminVisitors"/></span></span></li>
                </ul>
	        </div>
	    </div>
	    
	    <div id="principal">
            <!-- izquierda -->
            <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                <div class="izq">
					<%@include file="../../../bodyIzq.jsp" %>	
                </div>
                
                <div class="medio" style="border: 0px solid">
					
					<h2 class="decorado">
						<c:choose>		
							<c:when test="${param._userProviderId == null}">
								<fmt:message key="show.register"/> <fmt:message key="title.visitor"/>
							</c:when>
							<c:otherwise>
								<fmt:message key="show.modify"/> <fmt:message key="title.visitor"/>
							</c:otherwise>
						</c:choose>					
					</h2><br/> 
					
					<form:form method="post" id="formGrupo" commandName="userProvider" enctype="multipart/form-data">   						
						<form:hidden path="provider.providerId" value="${param._providerId}"/>
						<form:hidden path="rolProviderId.rolProviderId" value="2"/>
						<form:hidden path="active"/>
																			
						<c:set var="showName" scope="page"><fmt:message key="show.form.name"/>.</c:set>																																				                             												
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.name"/>:</label>
							<form:input path="name" id="name" class="required form_input_align letterSpace lettersOnly" maxlength="25" title="${showName}" autofocus="autofocus" placeholder="letras"/>
							<label class="error"><form:errors path="name" cssClass="error"></form:errors>*</label>
						</div>
						
						<c:set var="showLastNames" scope="page"><fmt:message key="show.form.lastNames"/>.</c:set>																																				                             						
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.lastName"/>:</label>
							<form:input path="lastName" id="lastName" class="required form_input_align letterSpace lettersOnly" maxlength="25" title="${showLastNames}" placeholder="letras"/>
							<form:input path="lastName2" id="lastName2" class="form_input_align letterSpace lettersOnly" maxlength="25" placeholder="letras"/>
							<label class="error"><form:errors path="lastName" cssClass="error"></form:errors>*</label>
						</div>       
						
						<c:set var="showCI" scope="page"><fmt:message key="show.form.ci"/>.</c:set>																																				                             
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.ci"/> :</label>
							<form:input path="ci" id="ci" class="form_input_align required numberOnlyNumber" minlength='1' maxlength="15" title="${showCI}" placeholder="números"/>
							<label class="error"><form:errors path="ci" cssClass="error"></form:errors>*</label>
						</div> 
						                          																													
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.selected.gender"/> :</label>
							<form:radiobutton path="genero" value="M" checked="checked" id="genero_M" class="required" /><label for="genero_M">&nbsp;<fmt:message key="form.male"/>&nbsp;&nbsp;</label>
							<form:radiobutton path="genero" value="F" id="genero_F" class="required" /><label for="genero_F">&nbsp;<fmt:message key="form.female"/>&nbsp;&nbsp;</label>
						</div> 
						
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.cellular"/> :</label>
							<form:input path="cellphone" id="cellphone" class="form_input_align numberOnlyNumber" maxlength="15" placeholder="números"/>
						</div>
						
						<c:set var="showPhone" scope="page"><fmt:message key="show.form.phone"/>.</c:set>																														
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.phone"/> :</label>
							<form:input path="phone" id="phone" class="form_input_align required numberOnlyNumber" minlength='1' maxlength="15" title="${showPhone}" placeholder="números"/>
							<label class="error"><form:errors path="phone" cssClass="error"></form:errors>*</label>
						</div>			
						
						<c:set var="showEmail" scope="page"><fmt:message key="show.form.email"/>.</c:set>																														
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.email"/> :</label>
							<form:input path="email" id="email" class="form_input_align required" minlength='1' maxlength="40" title="${showEmail}" placeholder="name@example.com" onblur="validateEmail(this);"/>
							<label class="error"><form:errors path="email" cssClass="error"></form:errors>*</label>
						</div>
						
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.email2"/> :</label>
							<form:input path="email2" id="email2" class="form_input_align" maxlength="40" placeholder="name@example.com" onblur="validateEmail(this);"/>
						</div>
																												
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.address"/> :</label>
							<form:input path="address" id="address" class="form_input_align" placeholder="texto"/>
						</div>
					 	<%-- 
					 	<div style="clear:both;">
                        	<label class="form_align40"><fmt:message key="form.birthDate"/> :</label>
    						<td><input name="birthDate" id="birthDate" class="form_input_align required" readonly="true" onclick="$(this).datepicker({changeMonth: true,changeYear: true,numberOfMonths: 1});$(this).datepicker().datepicker('show');" title="${showBirthdate}"></td>
                        </div>  
                         --%>
						<c:set var="showBirthdate" scope="page"><fmt:message key="show.form.birthDate"/>.</c:set>			
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.birthDate"/> :</label>
							<c:set var="temBirthdate" value="" />
                            <c:if test="${param._userProviderId != null}">
                            	<c:set var="partsBirthdate" value="${fn:split(userProvider.birthdate,'-')}" />
                            	<c:set var="temBirthdate" value="${partsBirthdate[2]}/${partsBirthdate[1]}/${partsBirthdate[0]}" />
                            </c:if>
							<form:input path="birthdate" id="birthdate" value="${temBirthdate}" class="form_input_align required" readonly="true" onclick="$(this).datepicker({changeMonth: true,changeYear: true,numberOfMonths: 1});$(this).datepicker().datepicker('show');" title="${showBirthdate}" placeholder="dd/mm/AAAA"/>
							<label class="error">*</label>
						</div>	 				
					  
						<div style="clear:both;">
                        	<label class="form_align40"><fmt:message key="form.picture"/> :</label>
                        	
    						<td>
    							<c:choose>
    								<c:when test="${userProvider.picture != null}">
	    								<c:set var="partsPicture" value="${fn:split(userProvider.picture,'/')}" />
	                            		<c:set var="temPicture" value="${partsPicture[2]}" />
	    								<img src="<c:url value="/resources/image/${partsPicture[2]}"/>" border="1" height="50" width="40"/>
	    							
	    								<input type="file" name="image" id="archivo" onblur="LimitAttach(this,1);" />
    								</c:when>
    								<c:otherwise>
    									<input type="file" name="image" id="archivo" onblur="LimitAttach(this,1);" />
    								</c:otherwise>
    							</c:choose>
    						</td>
                        </div>
						 
						<c:set var="showAccount" scope="page"><fmt:message key="show.form.account"/>.</c:set>																		
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.account"/> :</label>
							<form:input path="login" id="login" class="form_input_align required" minlength='1' maxlength="15" title="${showAccount}" placeholder="texto"/>
							<label class="error"><form:errors path="login" cssClass="error"></form:errors>*</label>
						</div>
						
						<c:set var="showPassword" scope="page"><fmt:message key="show.form.password"/>.</c:set>												
						<div style="clear:both;">
							<label class="form_align40"><fmt:message key="form.password"/> :</label>
							<form:input path="password" id="password" class="required form_input_align alphanumeric" maxlength="25" title="${showPassword}" placeholder="texto"/>
							<label class="error"><form:errors path="password" cssClass="error"></form:errors>*</label>
						</div>							
						
						<div style="clear: both">
							<label class="form_align40">&nbsp;</label>
							<table border="0" style="float: left">
								<fmt:message key="button.register" var="varSubmit" />
								<c:if test="${param._userProviderId != null}">
									<fmt:message key="button.modify" var="varSubmit" />
								</c:if>								
								<tr>
									<td style="text-align:right"><br/><input type="submit" value="${varSubmit}" name="action"  class="boton" title="<fmt:message key="onclick.for"/> ${varSubmit}" />&nbsp;&nbsp;</td>
									<td><br/>&nbsp;&nbsp;<input type="button" value="<fmt:message key="button.cancel"/>" name="action" onclick="mainVisitors()" class="boton" title="<fmt:message key="onclick.cancel"/>"/></td>
								</tr>
							</table>
						</div>
					</form:form>
                </div>
            </div><!--end of leftPan-->
            
            <div class="yDer" style="border: 1px solid #ccc;">
                  <%@include file="../../../notices.jsp" %>                       
            </div><!--end of rightPan-->
        </div><!-- end main content -->
	</div>
</div>
</body>
</html>
